<template>
  <a-layout>
    <a-layout-header style="background: #fff; padding: 0">
      <a-breadcrumb style="margin: 0 16px">
          <a-breadcrumb-item>人员列表</a-breadcrumb-item>
      </a-breadcrumb>
     <header style="padding-left: 20px; ">列表页</header>
    </a-layout-header>

    <a-layout-content style="margin: 20px 16px">
      <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
        <a-table bordered :columns="columns" :data-source="workerList" rowKey="user_id" >
          <template  slot="action"  slot-scope="text"  >
              <a @click.prevent=getDetail(text)>查看详情</a>
          </template>
        </a-table>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script>
import axios from 'axios'
import { mapState } from 'vuex'
const columns = [
  {
    title: 'Id',
    dataIndex: 'user_id',
    width: 200,
  },
  {
    title: '姓名',
    dataIndex: 'username',
    width: 100,
  },
  {
    title: '年龄',
    dataIndex: 'age',
    width: 100,
  },
  
  
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  },
];


export default {
  data() {
    return {
        columns,
    };
  },
  mounted(){
      this.$store.dispatch('getWorkerList')
  },
  computed: {
      ...mapState(['workerList'])
  },

  methods: {
      getDetail(text){
          this.$store.commit('updateId', text.user_id)
          this.$router.push(`/detail/${text.user_id}`)
      }
  }
};
</script>
<style  scoped>
</style>